<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../vue.js"></script>

		<!-- https://v2.cn.vuejs.org/v2/guide/syntax.html#插值 -->
		<!-- https://cn.vuejs.org/v2/guide/syntax.html -->
		<title>模板语法--插值</title>

	</head>
	<body>


		<!--  
		数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
		Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新
		
		通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
		
		<span v-once>这个将不会改变: {{ msg }}</span>
		
		-->
		<div id="vm1"><span v-once>{{message}}</span>


			<!-- 
		 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
		 这个 span 的内容将会被替换成为 property 值 rawHtml，直接作为 HTML——会忽略解析 property 值中的数据绑定。
		 注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。
		 
		 
		 这个 span 的内容将会被替换成为 property 值 rawHtml，直接作为 HTML——会忽略解析 property 值中的数据绑定。
		 注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。
		 
		 -->
			<p>Using mustaches: {{rawHtml}}</p>
			<p v-html="rawHtml"></p>

			<!-- 
		 
		 Attribute
		 Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
		 
		 对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
		 
		 <button v-bind:disabled="isButtonDisabled">Button</button>
		 如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。
		 
		 -->

			<div v-bind:id="dynamicId"></div>

			<div v-bind:class="color">test...</div>

			<button v-bind:disabled="isButtonDisabled">Button</button>



			<!-- 
			 
			使用 JavaScript 表达式
			迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

			{{ number + 1 }}

			{{ ok ? 'YES' : 'NO' }}

			{{ message.split('').reverse().join('') }}

			<div v-bind:id="'list-' + id"></div>
			这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

			这是语句，不是表达式
			{{ var a = 1 }}

			 流控制也不会生效，请使用三元表达式 
			{{ if (ok) { return message } }}
			模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
			 -->

			<p>{{number + 1}}</p>
			<p>{{ok?'yes':'no'}}</p>
			<p>{{1 == 1?'yes':'no'}}</p>
			<!-- 
				先将 message 内容 拆分单个汉字，然后在反序进行组合
			 -->
			<p>{{message.split('').reverse().join('')}}</p>

		</div>
		<script>

			var data = {
				message: '模板语法',
				rawHtml: '<span style="color:red;">This should be red</span>',
				color:'red',
				isButtonDisabled:false,
				number:10,
				ok:false,// false：no; true 、或者数字都是yes
				
			}

			var vm1 = new Vue({
				el: '#vm1',
				data: data,

			})

			data.message = '新的消息'
			data.color = 'blue'// 颜色动态改变
		</script>
		<style type="text/css">
			.red {
				color: red;
			}

			.blue {
				color: blue;
				font-size: 100px;
			}
		</style>

	</body>
</html>
